<%@ page import="com.pojo.Product" %>
<%@ page import="java.util.Arrays" %><%--
  Created by IntelliJ IDEA.
  User: 邹敦宇
  Date: 2021/3/10
  Time: 10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>爱购商品详情页</title>
    <%
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
    %>
    <base href="<%=basePath%>">
    <link rel="icon" type="image/x-icon" href="img/title-icon.jpg"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/top.css" />
    <link rel="stylesheet" href="css/goodsDetail.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="static/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/public.js" ></script>
    <script>

    </script>
</head>
<body>
<%--头部--%>
<jsp:include page="top-index.jsp"></jsp:include>
<!--导航栏-->
<div class="nav">
    <div class="w1230">
        <div id="all-goods">
            <span class="all-goods">所有商品分类</span>
            <div class="nav-er" id="nav-er">
                <ul>

                </ul>
            </div>
        </div>
    </div>
</div>
<!--商品详情-->
<div class="w1230 clear-float goods-main">
    <div class="big-img">
        <img src="/eshop/Img.do?m=showImg&name=${sessionScope.product.productImage}" width="100%" height="100%"/>
    </div>
    <div class="goods-detail">
        <h3 class="goods-title">${sessionScope.product.productName}</h3>
        <p class="price">价格<span>${sessionScope.product.price}</span></p>
        <p class="store-num">销量：<span>${sessionScope.product.productNum}</span></p>
        <div class="update-num">
            <div>
                <input type="text" value="1" id="goodsNum"/>
                <span class="add"></span>
                <span class="reduce"></span>
            </div>
            <a href="javascript:void(0)" id="addCart" onclick="subShopCart('${sessionScope.product.id}')" title="添加购物车"><i class="fa fa-shopping-cart"></i>添加购物车</a><span id="tips"><i class="fa fa-check-circle-o"></i>添加成功</span>
        </div>
    </div>
    <!--店家承诺-->
    <div class="promise">
        <h3><i class="fa fa-handshake-o"></i>爱购承诺</h3>
        <p>爱购平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！
            注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若没有及时更新，请大家谅解！</p>
    </div>
</div>
<!--商品介绍-->
<div class="w1230 clear-float">
    <!--商品推荐-->
    <div class="recommend goods-show">
        <h3>看了本商品的用户最终购买了</h3>
        <ul class="clear-float" id="recommend">

        </ul>
    </div>
    <!--商品介绍-->
    <div class="goods-des" >
        <h3 class="goods-tro">商品介绍</h3>
        <div class="goods-info" id="goods-des">
            <ul>
                <%
                    Product product = (Product) session.getAttribute("product");
                    String[] split = product.getProductDesc().split(",");
                %>
                <c:forEach var="desc" items="<%=split%>">
                    <li><img src="/eshop/Img.do?m=showImg&name=${desc}" alt="" /></li>
                </c:forEach>

            </ul>
        </div>
    </div>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script>
    var timer;
    $(function(){
        $.ajax({
            type:'get',
            url:'/eshop/product.do',
            data:{
                m:'findSimilarGoodsByID',
                id:'${sessionScope.product.id}'
            },
            dataType:'json',
            success:function (data) {
                $("#recommend>li").remove();
                for(let i=0;i<$("#goods-des>ul>li").length;i++){
                    $("#recommend").append('<li><a href="javascript:void(0)" onclick="toGoodsDetail(\''+data[i].id+'\')">\n' +
                        '                <div class="g-img"><img src="/eshop/Img.do?m=showImg&name='+data[i].productImage+'" alt="" width="230px" height="230px"/></div>\n' +
                        '                <p class="g-title">'+data[i].productName+'</p>\n' +
                        '                <span class="g-price">￥'+data[i].price+'</span>\n' +
                        '                <span class="g-num">销量：'+data[i]

                            .productNum+'</span>\n' +
                        '            </a></li>')
                }

            },
            error:function (e) {
                console.log(e);
            }
        })

        //增加商品数量
        $(".add").click(function(){
            $("#goodsNum").val(parseInt($("#goodsNum").val())+1);
            $(".reduce").css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
        });
        //减少商品数量
        $(".reduce").click(function(){
            console.log($("#goodsNum").val());
            if($("#goodsNum").val()>1){
                $("#goodsNum").val(parseInt($("#goodsNum").val())-1);
                $(this).css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
            }
            if($("#goodsNum").val()==1){
                $(this).css({"backgroundPositionX": "-24px", "backgroundPositionY": "25px"});
            }

        });

        //点击添加购物车
    });



    //提交到购物车
    function subShopCart(pid) {
        $.post("/eshop/shopCartProduct.do",{m:'add',userID:'${sessionScope.reception.id}',productId:pid,productNum:$('#goodsNum').val()},function (data) {
            $("#tips").text(data)
            clearTimeout(timer);
            $("#tips").css("display","inline-block");
            timer = setTimeout(function(){
                $("#tips").css("display","none");
            },3000);
        })
    }
</script>
</body>
</html>
